<template>
  <div class="app">
    <Row class="header">
      <Col class="logo-wrap">
      欣诚速递后台管理系统
      </Col>
      <COl class="user-info-wrap">
      <!--<Avatar icon="person" size="large" />-->
      </COl>
    </Row>
    <Row class="content-wrap">
      <Col class="content-side">
      <nav-menu class="side-nav" :menu="$store.state.menu"></nav-menu>
      </Col>
      <Col class="content-main">
      <router-view></router-view>
      </Col>
    </Row>
    <Spin size="large" fix v-show="$store.state.isShowLoading">
      <Icon type="load-c" class="demo-spin-icon-load"></Icon>
      <div>加载中...</div>
    </Spin>
  </div>
</template>

<script>
  import NavMenu from '../../components/admin/navMenu.vue'
  export default {
    name: 'app',
    components: {NavMenu},
    data () {
      return {}
    }
  }
</script>
<style lang="less">
  @import '../../../node_modules/iview/src/styles/custom.less';
  @import '../../assets/admin/styles/variable.less';

  @aside-width: 280px;

  html, body {
    height: 100%;
  }

  .app {
    position: relative;
    height: 100%;
    min-width: 1200px;
    padding-top: @nav_h;
  }

  .header {
    width: 100%;
    height: @nav_h;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: @text-color;

    .logo-wrap {
      width: @aside-width;
      height: @nav_h;
      line-height: @nav_h;
      font-size: 24px;
      color: #ffffff;
      text-align: center;
    }

    .user-info-wrap {
      width: 200px;
      height: 100%;
    }
  }

  .content-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    padding-left: @aside-width;
    overflow: hidden;

    .content-side {
      position: absolute;
      top: 0;
      left: 0;
      width: @aside-width;
      height: 100%;
      overflow: auto;
    }
    .content-main {
      width: 100%;
      height: 100%;
      padding: 10px;
      overflow: auto;
    }
    .side-nav {
      width: 100%;
      height: 100%;
    }
  }
</style>
